<template>
  <div class="page-box">
    <!-- 筛区域 -->
    <div class="search-box">
      <!-- :inline="true" 表单在一行显示 -->
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model.trim="query.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model.trim="query.cateid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            ref="timeRef"
            v-model="time"
            style="width:250px"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始"
            end-placeholder="结束"
            value-format="timestamp"
            @change="changeTime"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 工具条区域 -->
    <div class="tabbar-box">
      <el-row type="flex" justify="space-between">
        <div>
          <el-button plain type="primary" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
          <el-button plain type="warning" icon="el-icon-download" size="mini" @click="exportData">导出</el-button>
        </div>
        <div>
          <el-button icon="el-icon-arrow-down" size="mini" circle />
          <el-button icon="el-icon-refresh" size="mini" circle />
          <el-button icon="el-icon-menu" size="mini" circle />
        </div>
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <el-table
        :data="list"
        style="width: 100%"
        border
      >
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="catename" label="分类名" />
        <el-table-column label="图片">
          <template #default="{row}">
            <img style="width:100px;" :src="'http://124.223.14.236:8060/' + row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="{row}">
            {{ new Date(row.create_date).toLocaleDateString([],{year:"numeric",month: "2-digit",day: "2-digit"}).replace(/\//g,'-') }}
          </template>
        </el-table-column>
        <el-table-column label="是否推荐">
          <template #default="{row}">
            <el-switch
              v-if="row.ishot === 1"
              v-model="value1"
              active-color="#409eff"
              inactive-color="#dcdfe6"
              :disabled="true"
            />
            <el-switch
              v-else
              v-model="value2"
              active-color="#409eff"
              inactive-color="#dcdfe6"
              :disabled="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否顶置">
          <template #default="{row}">
            <el-switch
              v-if="row.istop ===1"
              v-model="value1"
              active-color="#409eff"
              inactive-color="#dcdfe6"
              :disabled="true"
            />
            <el-switch
              v-else
              v-model="value2"
              active-color="#409eff"
              inactive-color="#dcdfe6"
              :disabled="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="文章状态">
          <template #default="{row}">
            <el-tag v-if="row.status=== 2">待审核</el-tag>
            <el-tag v-else-if="row.status=== 0">草稿箱</el-tag>
            <el-tag v-else-if="row.status=== 1">已发布</el-tag>
            <el-tag v-else>已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-row type="flex" justify="center">
              <el-button circle type="primary" icon="el-icon-edit" size="mini" @click="$router.push(`/content_article/edit/${row.id}`)" />
              <el-button circle type="danger" icon="el-icon-delete" size="mini" @click="del(row.id)" />
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- ! 分页区域 -->
    <div class="page">
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="query.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { exportData } from '@/utils/export'

import { getArticleList, getCateList, deleteArticle } from '@/api/article/article'
export default {
  data() {
    return {
      // ! 导出数据
      aoa: [],
      time: '',
      options: [],
      value: '',
      value1: true,
      value2: false,
      list: [],
      query: {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      },
      total: 0
    }
  },
  created() {
    this.initData()
    this.getCateList()
  },
  methods: {
    // ! 删除
    del(id) {
      this.$confirm('确定删除吗,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // ! 删除请求
        await deleteArticle(id)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // ! 获取分类列表
    async getCateList() {
      const res = await getCateList()

      this.options = res
    },
    // ! 新增
    add() {
      this.$router.push('/content_article/add')
    },
    // ! 时间
    changeTime() {
      this.query.start_time = this.time[0]
      this.query.end_time = this.time[1]
    },
    // ! 筛选
    search() {
      this.query.page = 1
      this.initData()
    },
    // ! 重置
    reset() {
      this.query = {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      }
      this.time = ''
      this.initData()
    },
    // ! 导出
    exportData() {
      this.list.forEach((item, index) => {
        this.aoa.push([index + 1, item.title, item.catename, item.pic,
          new Date(item.create_date).toLocaleDateString([], { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-'),
          item.hot ? '是' : '否', item.top ? '是' : '否'])
      })
      exportData(this.list, ['#', '标题', '分类名', '图片', '创建时间', '是否推荐', '是否顶置'], this.aoa)
    },
    // ! 分页
    handleSizeChange(value) {
      this.query.limit = value
      this.query.page = 1
      this.initData()
    },
    handleCurrentChange(value) {
      this.query.page = value
      this.initData()
    },
    async initData() {
      const res = await getArticleList(this.query)
      this.list = res.data
      this.total = res.count
    }
  }
}
</script>
<style lang="scss" scoped>
  .page-box {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    .search-box,.tabbar-box {
      padding-top: 10px;
      height: 50px;
    }
  }

</style>
